<template>
	<view class="user-course">
		<movable-area class="server-btn">
			<movable-view direction="all" class="server-btn-img">
				<image 
					:lazy-load="true" 
					:src="type==1?'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-08/20210408/18a3fc66118541550eaf15a4e98c9e65.png':'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-08/20210408/b207fb428553daacb5b695a9ca92d6db.png'" 
					@click="showServer">
				</image>
			</movable-view>
		</movable-area>
		<view class="user-course-top">
			<image :src="type==1?'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-08/20210408/36800ab8f80c8c07ddaa5f38afe8de2c.png':'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-08/20210408/0408e67ec9f0f71352f0d9a98831c53d.png'"></image>
			<view class="user-course-top-main">
				<view class="user-course-top-tit">
					<view class="tit-text">
						<view>您好~</view>
						<view>欢迎来到用户手册</view>
					</view>
					<view class="tit-btn" @click="goMerchant" v-if="type==1">商家端</view>
					<view class="tit-btn tit-btn-merchant" @click="goMerchant" v-if="type==2">商城端</view>
				</view>
				<u-search placeholder="请输入您的疑问" v-model="keyword" :show-action="false" height="72" bg-color="#FFF" @search="init()" @clear="init()"></u-search>
			</view>
		</view>
		<view class="user-course-bottom">
			<scroll-view scroll-y class="user-course-bottom-left">
				<view class="user-course-bottom-left-list">
					<view class="user-course-bottom-left-item" v-for="(data,index) in list" :key="index" :class="{active: currentIndex==index}" @click="goTabs(index)">
						<image :src="data.logo" v-if="currentIndex!=index"></image>
						<image :src="data.logo_click" v-else></image>
						<view class="name">{{data.name}}</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="user-course-bottom-right" @scroll="scrolls" scroll-with-animation :scroll-into-view="doms">
				<view class="collapse-item" v-for="(data, index) in list" :key="index" v-if="list.length">
					<view class="collapse-item-tit" :id="'dom'+index">
						{{data.name}}
						<!-- <u-icon name="arrow-down" color="#999"></u-icon> -->
					</view>
					<view class="collapse-item-chirld" v-for="(item,i) in data.lower" :key="i" @click="goCourseInfo(item.name,item.content)">{{item.name}}</view>
				</view>
			</scroll-view>
			<view class="tips" style="background-color: #FFF; position: absolute; top: 0; left: 0; width: 100%; height: 100%;" v-if="!list.length">
				<nothing :text="keyword?'暂无'+keyword+'搜索结果':'暂无数据'" :btn="false"></nothing>
			</view>
		</view>
		<!-- 客服 -->
		<uni-popup type="center" ref="server">
			<pt-server></pt-server>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				keyword: '',
				list: [],
				topList: [],
				currentIndex: 0,
				doms: '',
				userInfo: '',
				type: 2
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.init()
		},
		methods: {
			showServer(){
				this.$refs.server.open()
			},
			scrolls(e){
				let scrollTop = e.target.scrollTop
				for(let i = 0; i < this.topList.length; i++){
					let h1 = this.topList[i]
					let h2 = this.topList[i+1]
					if(scrollTop >= h1 && scrollTop < h2){
						this.currentIndex = i
					}
				}
			},
			getNodesInfo(){
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.collapse-item .collapse-item-tit').boundingClientRect().exec((res)=>{
					let nodes = res[0]
					let rel = [];
					nodes.map(item=>{
						rel.push(item.top - uni.upx2px(318))
					})
					this.topList = rel
				})
			},
			init(){
				this.$api.ManualLists({limit: 300,order_by: 'add_time', asc: 1,keyword: this.keyword,type: this.type}).then(res => {
					this.list = res.datas
				}).then(() => {
					this.$nextTick(() => {
						this.getNodesInfo()
					})
				})
			},
			goTabs(index){
				this.doms = 'dom'+index
				setTimeout(() => {
					this.currentIndex = index
				},800)
			},
			goCourseInfo(name,content){
				uni.navigateTo({
					url: '/pages/course/course-info?name='+encodeURIComponent(name)+'&content='+encodeURIComponent(content)
				})
			},
			goMerchant(){
				this.topList = []
				this.currentIndex = 0
				this.doms = ''
				this.list = []
				this.keyword = ''
				if(this.type==1){
					this.type = 2
					this.init()
				}else{
					this.type = 1
					this.init()
				}
			},
		}
	}
</script>

<style lang="scss">
	.user-course{
		.server-btn{
			position: fixed !important;
			left: 0;
			top: 30rpx;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;
			pointer-events: none;
			z-index: 20;
			width: auto;
			height: auto;
			.server-btn-img{
				position: absolute !important;
				width: 90rpx;
				height: 90rpx;
				pointer-events: auto;
				border-radius: 50%;
				top: initial;
				left: initial;
				right: 0;
				bottom: 0;
				bottom: constant(safe-area-inset-bottom);
				bottom: env(safe-area-inset-bottom);
				text-align: center;
				image{
					width: 90rpx;
					height: 90rpx;
				}
			}
		}
		.user-course-top{
			position: relative;
			image{
				width: 100%;
				height: 340rpx;
			}
			.user-course-top-main{
				position: absolute;
				left: 40rpx;
				right: 40rpx;
				top: 50rpx;
				.user-course-top-tit{
					margin-bottom: 50rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.tit-text{
						font-size: 42rpx;
						color: #FFF;
					}
					.tit-btn{
						width: 165rpx;
						line-height: 60rpx;
						border-radius: 30rpx;
						background-color: #2073F5;
						color: #FFF;
						display: flex;
						align-items: center;
						justify-content: center;
						&.tit-btn-merchant{
							background-color: #F59359;
						}
						&::after{
							content: '';
							width:0;
							height:0;
							display: inline-block;
							vertical-align: middle;
							margin: 4rpx 0 0 10rpx;
							border-top: 12rpx solid transparent;
							border-bottom: 12rpx solid transparent;
							border-left: 12rpx solid #FFF;
						}
					}
				}
			}
		}
		.user-course-bottom{
			position: fixed;
			bottom: 0;
			top: 318rpx;
			left: 0;
			right: 0;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			.user-course-bottom-left{
				background-color: #f2f2f2;
				position: absolute;
				width: 135rpx;
				top: 0;
				bottom: 0;
				padding: 50rpx 0;
				.user-course-bottom-left-list{
					.user-course-bottom-left-item{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						height: 150rpx;
						&.active{
							background-color: #FFF;
						}
						image{
							width: 48rpx;
							height: 48rpx;
						}
						.name{
							font-size: 24rpx;
						}
					}
				}
			}
			.user-course-bottom-right{
				background-color: #FFF;
				position: absolute;
				left: 135rpx;
				top: 0;
				bottom: 0;
				right: 0;
				width: auto;
				padding-top: 30rpx;
				.collapse-item{
					border-bottom: solid 2rpx #f2f2f2;
					padding: 0 45rpx;
					margin-bottom: 30rpx;
					.collapse-item-tit{
						font-weight: bold;
						color: #141414;
						font-size: 32rpx;
						margin-bottom: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						/deep/ .u-icon{
							font-weight: normal;
						}
					}
					.collapse-item-chirld{
						border-bottom: solid 2rpx #f2f2f2;
						padding: 30rpx 0;
						font-size: 28rpx;
						color: #333;
						&:last-child{
							border-bottom: none;
						}
					}
				}
			}
		}
	}
</style>
